<template>
  <div class="project-top-menu">
    <div class="menu-left">
      <span class="menu-left-name" @click="backToEnterprise">当前企业：{{ enterpriseName }}</span>
      <el-button-group class="menu-btn-change">
        <el-button type="primary" size="mini" icon="el-icon-arrow-left" @click="activePrevOrNext(false)">上一项</el-button>
        <el-button type="primary" size="mini" @click="activePrevOrNext">下一项<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
    <div class="menu-right">
      <div class="menu-nav-list">
        <div class="menu-nav-item" :class="{active:item.code===activeTag}" v-for="(item,index) in menuList" :key="index" @click="changeActive(item.code)">
          <svg-icon :icon-class="item.icon==null?'system':item.icon" />
          <span>{{item.name}}</span>
        </div>
        <div class="menu-end el-icon-s-home" @click="backToEnterprise"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'topMenu',
  props: {
    active: {
      type: String,
      default: "step0"
    },
    enterpriseName:{
      type: String,
      default: ""
    }
  },
  watch:{
    active:{
      immediate:true,
      handler(newV){
        this.activeTag = newV
      }
    }
  },
  data() {
    return {
      activeTag:null,
      startTag:null,
      endTag:null,
      menuList:[],
    }
  },
  mounted() {
    let { enterpriseType } = this.$route.params;
    this.menuList = this.$store.state.stepDict.enterpriseMenu['type_'+enterpriseType];
  },
  methods: {
    activePrevOrNext(isNext=true){
      if(this.menuList.length===0)return
      let index = this.menuList.findIndex(e=>e.code==this.activeTag);
      let code = null;
      if(isNext){
        if(index>=this.menuList.length)return
        code = this.menuList[index+1].code
      }else{
        if(index<=0)return
        code = this.menuList[index-1].code
      }
      if(code)this.$emit('upActiveStep',  code);
    },
    changeActive(newActive,oldActive){
      if(newActive == this.activeTag)return;
      this.$emit('upActiveStep',  newActive);
    },
    backToEnterprise(){
      this.$emit('clearEnterpriseMenuName');
      this.$router.push('/');//历史项目返回我的项目
    },
  }
}
</script>

<style lang="scss" scoped>
  .project-top-menu{
    height: 50px;
    display: flex;
    justify-content: flex-start;
    .menu-left{
      width: 20%;
      height: 100%;
      background:url("~@/assets/image/menu/menu-left.png") no-repeat center;
      background-size: 100% 100%;
      color: #FFFFFF;
      padding: 0 35px 0 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .menu-left-name{
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        width: 57%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .menu-btn-change{
        width: 43%;
        .el-button{
          padding: 8px!important;
        }
      }
    }
    .menu-right{
      width: 81.8%;
      margin-left: -1.8%;
      height: 50px;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      .menu-nav-list{
        width: 99%;
        height: 36px;
        margin-top: 7px;
        border: 2px solid #03927D;
        box-sizing: border-box;
        border-right: none;
        border-left: none;
        animation:toRight 1.5s cubic-bezier(0.25,0.1,0.25,1) 1;
        background-color: #FCEDD6;
        padding: 0 5%;
        display: flex;
        position: absolute;
      }
      .menu-nav-item{
        width: 12%;
        height: 50px;
        margin: -7px 1% 0 1%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        span{
          margin-left: 5px;
        }
        &.active,&:hover{
          color: #FFFFFF;
          background:url("~@/assets/image/menu/menu-item.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
      .menu-end{
        width: 2.5%;
        background:url("~@/assets/image/menu/menu-right.png") no-repeat center;
        background-size: 100% 100%;
        height: 50px;
        margin: -8px 0 0 0;
        position: absolute;
        right: -15px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        color: #FFFFFF;
        cursor: pointer;
        &:hover{
          color: #1bd9bd;
        }
      }
    }
    @keyframes toRight {
      0%{
        left: -100%;
      }
      100%{
        left: 0%;
      }
    }
    @keyframes toEnd {
      0%{
        right: 100%;
      }
      100%{
        right: 5px;
      }
    }
  }
</style>
